<template>
	<view style="flex: 1;">
		<view class="related-box" v-for="i in list" v-if="i.id" @click.stop="keys.click(i)" :key="i.id">
			<img :src="icon" /><text>{{ i.title }}</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		value: {
			type: [Array,Object,String],
			default() {
				return {};
			}
		},
		keys: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	computed:{
		list(){
			if(!this.value) return [];
			if(Array.isArray(this.value)){
				return this.value;
			}
			return [this.value];
		}
	},
	data(){
		return {
			icon:`
			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
			AAAElFTkSuQmCC`
		}
	}
};
</script>
<style scoped lang="scss">
.related-box {
	font-size: 24rpx;
	// display: flex;
	// align-items: flex-start;
	// align-items: center;
	border-radius: 4px;
	background-color: rgba(0,0,0,.1);
	box-shadow: 0 0 2px 0 rgba(0,0,0,.1);
	color: rgba(0,0,0,.8);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 30px;
	height: 30px;
	padding: 0 5px;
	text-align: left;
	img{
		width: 18px;
		margin:6px;
		float: left;
	}
	&:nth-child(even){
		margin: 5rpx 0;
	}
}
</style>
